<template>
  <el-container>
    <!-- 头部导航区 -->
    <el-header class="el-header">
      <Header></Header>
    </el-header>
    <el-container class="container-middle">
      <!-- 侧边栏导航区 -->
      <transition>
        <el-aside
          :width="isCollapse ? 58 + 'px' : 200 + 'px'"
          v-show="!isUpToHead"
        >
          <Aside></Aside>
        </el-aside>
      </transition>
      <!-- 内容主体区 -->
      <div ref="scrollview" class="scrollview">
        <el-main>
          <router-view></router-view>
        </el-main>
      </div>
    </el-container>
    <!-- 音乐播放栏 -->
    <APlayer></APlayer>
    <transition>
      <img
        v-show="btnFlag"
        class="go-top"
        title="回到顶部"
        src="../../assets/img/scroll.webp"
        @click="backTop"
      />
    </transition>
  </el-container>
</template>
<script>
import Header from './children/Header.vue'
import Aside from './children/Aside.vue'
import APlayer from '@/components/APlayer.vue'
import { mapState, mapMutations } from 'vuex'
import throttle from '@/lib/throttle'

export default {
  components: { Header, Aside, APlayer },
  computed: {
    ...mapState('user', ['isCollapse', 'isUpToHead', 'isLoadComment'])
  },
  data() {
    return {
      btnFlag: false,
      scrollTop: 0
    }
  },
  methods: {
    ...mapMutations('user', ['updateLoadComment']),
    // 滑动到顶部
    backTop() {
      const scrollview = this.$refs['scrollview']
      setTimeout(() => {
        scrollview.scrollTop = 0
      }, 300)
    },
    loadMore() {
      this.$bus.$emit('loadComment')
    },
    scrollChange() {
      const scrollview = this.$refs['scrollview']
      const scrollTop = scrollview.scrollTop
      this.scrollTop = scrollTop
      // 滚动条下移了 600px
      if (scrollTop > 600) {
        this.btnFlag = true
        // 总滚动条长 - 滚动的距离 - 视口高度
        const scrollHeight = scrollview.scrollHeight
        const clientHeight = scrollview.clientHeight
        // 滚动到距离底部 300px 且加载了 Comment 组件时
        if (
          this.isLoadComment &&
          scrollHeight - scrollTop - clientHeight < 300
        ) {
          // 发起加载评论请求
          this.$bus.$emit('loadComment')
        }
      } else this.btnFlag = false
    }
  },
  mounted() {
    const scrollview = this.$refs['scrollview']
    const outputRes = throttle(this.scrollChange)
    // 滚动监听，同时监听了拖拽滚动条
    // 每个 main 中组件都有监听,所以这里就不销毁了
    scrollview.addEventListener('scroll', outputRes, true)
  }
}
</script>
<style lang="less" scoped>
.el-header {
  background-color: #fff;
  width: 100%;
  border-bottom: 1px rgba(200, 200, 200, 0.3) solid;
}

.el-container {
  height: 100%;
}

.container-middle {
  display: flex;
  justify-content: center;
  overflow: hidden;

  .v-enter-active {
    animation: ani 0.3s;
  }

  .v-leave-active {
    animation: ani 0.3s reverse;
  }
}

.el-aside {
  border-right: 1px rgba(200, 200, 200, 0.3) solid;
  transition: width 0.3s;
  background-color: #fff;
}

.el-main {
  padding: 10px 8% 100px;
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
}

.scrollview {
  width: 100%;
  overflow-y: scroll;
  transition: all 0.8s;
}

.go-top {
  height: 600px;
  position: fixed;
  right: 40px;
  top: 0;
  cursor: pointer;
}

.v-enter-active {
  animation: aniScroll 0.8s;
}
.v-leave-active {
  animation: aniScroll 0.5s reverse;
}

@keyframes ani {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes aniScroll {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
